<template>
    <div class="footer">
        <ul class="footer-list">
            <router-link v-for="(item,index) in lis" :key="index" :to="item.push" tag="li" active-class="actived">
                <img class="icon" :src="item.imgs" alt="">
                <img class="icon active-class" :src="item.imgs2" alt="">
                <p class="i-name">{{item.ps}}</p>
                <p v-if="goods" class="counts">{{goods}}</p>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            lis:[
                {
                    imgs:require('../assets/tabbar/ic_index_default.png'),
                    imgs2:require('../assets/tabbar/ic_index_selected.png'),
                    ps:'首页',
                    push:'/Home'
                },
                {
                    imgs:require('../assets/tabbar/ic_classifyq.png'),
                    imgs2:require('../assets/tabbar/ic_classifyh.png'),
                    ps:'分类',
                    push:'/classify'
                },
                {
                    imgs:require('../assets/tabbar/ic_cart_default.png'),
                    imgs2:require('../assets/tabbar/ic_cart_selected.png'),
                    ps:'购物车',
                    push:'/shopping'
                },
                {
                    imgs:require('../assets/tabbar/ic_my_default.png'),
                    imgs2:require('../assets/tabbar/ic_my_selected.png'),
                    ps:'我的',
                    push:'/my'
                },
            ]
        }
    },
    computed:{
        goods(){
            return this.$store.state.good.goodsCount
        }
    }
}
</script>
<style scoped lang="scss">
.footer{
    height: 0.48rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.90);
    box-shadow: inset 0 0 0 0 #E1E1E1;
    
    &::after{
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid #E1E1E1;
    }
    .footer-list{
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 0.49rem;
        position: relative;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            .icon{
                width: 0.18rem;
                height: 0.18rem;
            }
            .active-class{
                display: none;
            }
            p{
                font-size: 0.11rem;
                color: #666;
                font-weight: lighter;
            }
            .counts{
                width: 0.12rem;
                height: 0.12rem;
                background: #DD3333;
                color: #fff;
                border-radius: 50%;
                text-align: center;
                line-height: 0.12rem;
                position: absolute;
                left: 63%;
                top: 0.06rem;
                font-size: 0.09rem;
            }
            
        }
        .actived {
            .i-name{
                color: #DD3333;
            }
            .icon{
                display: none;
            }
            .active-class{
                display: block;
            }
        }
    }
}

</style>
